<template>
  <div class="strategy-detail">
    <el-drawer
      title="策略详情"
      class="strategy-detail"
      :visible.sync="detailVisible"
      :with-header="true"
      direction="rtl"
      :wrapper-closable="true"
    >
      <el-form class="form" :model="detailForm" label-position="left" label-width="150px">
        <el-form-item label="自动派单策略ID:">
          <el-input v-model="detailForm.strategyCode" disabled />
        </el-form-item>
        <el-form-item label="自动派单策略名称:">
          <el-input v-model="detailForm.strategyName" disabled />
        </el-form-item>
        <el-form-item label="创建策略人:">
          <el-input v-model="detailForm.createUser" disabled />
        </el-form-item>
        <el-form-item label="创建时间:">
          <el-input v-model="detailForm.createTime" disabled />
        </el-form-item>
        <el-form-item label="自动派单策略:">
          <div style="color: red;">自动派单按照优先自动派单策略的顺序进行派单，所有自动派策略都派单失败，派单失败的单子会进入自动派单失败页面，进行手动派单</div>
          <div class="strategyType-box">
            <div v-for="(item,index) in descList" :key="index" class="strategyType-item">
              <div style="display: inline-block; margin-right: 10px;">第{{ index+1 }}优先策略: {{ item }}</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="自动派单时间:">
          <div style="color: red;">开启自动派单之后，系统会按照设置的自动派单时间段进行自动派单，自动派单时间段之前未派单的单子，也会进行自动派单</div>
        </el-form-item>
        <el-form-item label="" prop="startTime" label-width="0px" style="display: inline-block; width: 220px; margin-left: 150px;">
          <el-time-select
            v-model="detailForm.startTime"
            disabled
            placeholder="起始时间"
            :picker-options="{
              start: '08:00',
              step: '00:15',
              end: '19:00'
            }"
          />
        </el-form-item>
        <div style="display: inline-block;">至</div>
        <el-form-item label="" prop="endTime" label-width="0px" style="display: inline-block; width: 220px;">
          <el-time-select
            v-model="detailForm.endTime"
            disabled
            placeholder="结束时间"
            :picker-options="{
              start: '08:00',
              step: '00:15',
              end: '19:00',
              minTime: detailForm.startTime
            }"
          />
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
  import { queryMap, detailStrategy } from '@/api'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'
  import { formatColumnMap, parseTime } from '@/utils'
  export default {
    name: '',
    components: {},
    data() {
      return {
        detailVisible: false,
        StrategyTypeMap: [],
        descList: [],
        detailForm: {
          strategyCode: null,
          strategyName: '',
          dispatchTime: [],
          startTime: '',
          endTime: '',
          strategyType: [],
          createTime: '',
          createUser: ''
        }
      }
    },
    computed: {},
    async created() {
      await Promise.all([this.queryOptionsMap()])
    },
    mounted() {},
    methods: {
      // 查询枚举
      async queryOptionsMap() {
        const [res1] = await Promise.all([
          mergeAsyncFunc(queryMap, { enumName: 'StrategyType' })
        ])
        this.StrategyTypeMap = res1.data // 派单策略枚举
      },
      // 详情
      open(temp) {
        detailStrategy({ strategyCode: temp.strategyCode }).then(res => {
          temp = { ...temp, ...res.data }
          // console.log(temp)
          let newStrategyType = temp.strategyType.split(',')
          newStrategyType = newStrategyType.map(item => {
            return Number(item)
          })
          this.descList = []
          for (const i of newStrategyType) {
            this.descList.push(formatColumnMap(this.StrategyTypeMap, 'value', i, 'desc'))
          }
          this.detailForm = {
            strategyCode: temp.strategyCode,
            strategyName: temp.strategyName,
            createUser: temp.createUser,
            createTime: parseTime(temp.createTime, '{y}-{m}-{d} {hh}:{mm}:{ss}'),
            startTime: temp.dispatchTime.split('-')[0],
            endTime: temp.dispatchTime.split('-')[1],
            strategyType: newStrategyType
          }
          //  console.log(this.dataForm)
          this.detailVisible = true
        }).catch(err => {
          this.$message.error(err.message)
        })
      }
    }
  }

</script>
<style lang='scss' scoped>
.strategy-detail {
  /deep/.el-drawer {
    width: 75% !important;
    padding: 20px 20px 0 0;
    .form {
      padding-left: 20px;
    }
  }
}
</style>
